<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人力资源预测管理系统</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
            overflow: hidden;
        }
        
        .app-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部工具栏 */
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        
        .header-left {
            display: flex;
            align-items: center;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            margin-right: 20px;
        }
        
        .header-title {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .user-info:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        /* 右侧菜单 */
        .sidebar {
            width: 250px;
            background-color: white;
            border-right: 1px solid #e9ecef;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            transition: width 0.3s ease;
            position: relative;
        }
        
        .sidebar.collapsed {
            width: 60px;
        }
        
        .sidebar-toggle {
            position: absolute;
            top: 20px;
            right: -12px;
            width: 24px;
            height: 24px;
            background-color: #409eff;
            border: 2px solid white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 12px;
            z-index: 100;
            transition: all 0.3s ease;
        }
        
        .sidebar-toggle:hover {
            background-color: #337ecc;
            transform: scale(1.1);
        }
        
        .sidebar.collapsed .sidebar-toggle {
            right: -12px;
        }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
            height: 60px;
            min-height: 60px;
            max-height: 60px;
        }
        
        .sidebar.collapsed .sidebar-header {
            padding: 20px;
            height: 60px;
            min-height: 60px;
            max-height: 60px;
        }
        
        .sidebar-title {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            height: 20px;
            min-height: 20px;
            max-height: 20px;
        }
        
        .sidebar-subtitle {
            font-size: 12px;
            color: #6c757d;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            height: 16px;
            min-height: 16px;
            max-height: 16px;
        }
        
        .sidebar.collapsed .sidebar-title,
        .sidebar.collapsed .sidebar-subtitle {
            opacity: 0;
            visibility: hidden;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .menu-container {
            flex: 1;
            padding: 20px 0;
            overflow-y: auto;
        }
        
        .menu-group {
            margin-bottom: 20px;
        }
        
        .menu-group-title {
            padding: 0 20px 10px;
            font-size: 12px;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
            height: 20px;
            min-height: 20px;
            max-height: 20px;
        }
        
        .sidebar.collapsed .menu-group-title {
            opacity: 0;
            visibility: hidden;
            white-space: nowrap;
            overflow: hidden;
            height: 20px;
            min-height: 20px;
            max-height: 20px;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 8px 20px;
            cursor: pointer;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            color: #2c3e50;
            position: relative;
            height: 36px;
            min-height: 36px;
            max-height: 36px;
        }
        
        .sidebar.collapsed .menu-item {
            padding: 8px 20px;
            justify-content: center;
            height: 36px;
            min-height: 36px;
            max-height: 36px;
            position: relative;
        }
        
        .menu-item:hover {
            background-color: #f8f9fa;
            border-left-color: #409eff;
            color: #409eff;
        }
        
        .menu-item.active {
            background-color: #ecf5ff;
            border-left-color: #409eff;
            color: #409eff;
        }
        
        .menu-icon {
            margin-right: 12px;
            font-size: 16px;
            width: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .sidebar.collapsed .menu-icon {
            margin-right: 0;
        }
        
        /* 悬浮提示 */
        .menu-tooltip {
            position: fixed;
            background-color: #2c3e50;
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            pointer-events: none;
        }
        
        .menu-tooltip::before {
            content: '';
            position: absolute;
            left: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-right: 4px solid #2c3e50;
        }
        

        
        .menu-text {
            font-size: 14px;
            transition: all 0.3s ease;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .sidebar.collapsed .menu-text {
            opacity: 0;
            visibility: hidden;
            white-space: nowrap;
            overflow: hidden;
        }
        
        /* Tab区域 */
        .tab-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #f5f5f5;
        }
        
        .tab-header {
            background-color: white;
            border-bottom: 1px solid #e9ecef;
            padding: 0 20px;
            display: flex;
            align-items: center;
            height: 50px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .tab-list {
            display: flex;
            align-items: center;
            flex: 1;
            overflow-x: auto;
        }
        
        .tab-item {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            margin-right: 4px;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            transition: all 0.3s;
            min-width: 120px;
            max-width: 200px;
            position: relative;
        }
        
        .tab-item.active {
            background-color: white;
            border-bottom-color: white;
            color: #409eff;
        }
        
        .tab-item:hover {
            background-color: #e9ecef;
        }
        
        .tab-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
        }
        
        .tab-close {
            margin-left: 8px;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.3s;
            font-size: 12px;
        }
        
        .tab-close:hover {
            background-color: #f56c6c;
            color: white;
        }
        
        .tab-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 20px;
        }
        
        .tab-action-btn {
            padding: 4px 8px;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            color: #6c757d;
        }
        
        .tab-action-btn:hover {
            background-color: #e9ecef;
            color: #409eff;
        }
        
        /* 内容区域 */
        .content-area {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        
        .iframe-container {
            width: 100%;
            height: 100%;
            border: none;
            background-color: white;
        }
        
        .empty-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #6c757d;
            font-size: 16px;
        }
        
        .empty-icon {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0.3;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                width: 200px;
            }
            
            .header {
                padding: 0 15px;
            }
            
            .logo {
                font-size: 18px;
                margin-right: 15px;
            }
        }
        
        /* 隐藏滚动条 */
        .menu-container::-webkit-scrollbar {
            width: 0;
            display: none;
        }
        
        .menu-container {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
    </style>
</head>
<body>
    <div id="app" class="app-container">
        <!-- 顶部工具栏 -->
        <div class="header">
            <div class="header-left">
                <div class="logo">📊 HR预测系统</div>
                <div class="header-title">人力资源需求预测管理平台</div>
            </div>
            <div class="header-right">
                <el-dropdown @command="handleUserCommand">
                    <div class="user-info">
                        <div class="user-avatar">👤</div>
                        <span>管理员</span>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                        <el-dropdown-item command="settings">系统设置</el-dropdown-item>
                        <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 右侧菜单 -->
            <div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
                <div class="sidebar-toggle" @click="toggleSidebar">
                    <i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                </div>
                <div class="sidebar-header">
                    <div class="sidebar-title">功能导航</div>
                    <div class="sidebar-subtitle">HR预测管理系统</div>
                </div>
                
                                 <div class="menu-container">
                     <!-- 任务管理 -->
                     <div class="menu-group">
                         <div class="menu-group-title">任务管理</div>
                         <div class="menu-item" @click="openTab('audit.html', '审核管理', '🔍')" @mouseenter="showTooltip($event, '审核管理')" @mouseleave="hideTooltip()">
                            <span class="menu-icon">🔍</span>
                            <span class="menu-text">任务发布/审核</span>
                        </div>
                         <div class="menu-item" @click="openTab('task-list.html', '待填报任务', '📋')" @mouseenter="showTooltip($event, '待填报任务')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">📋</span>
                             <span class="menu-text">数据填报</span>
                         </div>
                         <!-- <div class="menu-item" @click="openTab('forecast-input.html', '预测填报', '📝')" @mouseenter="showTooltip($event, '预测填报')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">📝</span>
                             <span class="menu-text">预测填报</span>
                         </div> -->
                     </div>
                     
                     <!-- 数据管理 -->
                     <div class="menu-group">
                         <div class="menu-group-title">数据管理</div>
                         <div class="menu-item" @click="openTab('data-import.html', '数据导入', '📥')" @mouseenter="showTooltip($event, '数据导入')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">📥</span>
                             <span class="menu-text">Actual/Budget数据导入</span>
                         </div>
                         <!-- <div class="menu-item" @click="openTab('data-import-forecast.html', '预测数据导入', '📊')" @mouseenter="showTooltip($event, '预测数据导入')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">📊</span>
                             <span class="menu-text">预测数据导入</span>
                         </div>
                         <div class="menu-item" @click="openTab('summary.html', '数据汇总', '📈')" @mouseenter="showTooltip($event, '数据汇总')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">📈</span>
                             <span class="menu-text">数据汇总</span>
                         </div> -->
                     </div>
                     
                     <!-- 组织管理 -->
                     <div class="menu-group">
                         <div class="menu-group-title">组织管理</div>
                         <div class="menu-item" @click="openTab('organization.html', '组织架构', '🏢')" @mouseenter="showTooltip($event, '组织架构')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">🏢</span>
                             <span class="menu-text">组织架构管理</span>
                         </div>
                         <div class="menu-item" @click="openTab('staff-settings.html', '人员设置', '👥')" @mouseenter="showTooltip($event, '人员设置')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">👥</span>
                             <span class="menu-text">填报人员设置</span>
                         </div>
                         <div class="menu-item" @click="openTab('user-groups.html', '用户组管理', '👤')" @mouseenter="showTooltip($event, '用户组管理')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">👤</span>
                             <span class="menu-text">用户组管理</span>
                         </div>
                     </div>
                     
                     <!-- 系统工具 -->
                     <!-- <div class="menu-group">
                         <div class="menu-group-title">系统工具</div>
                         <div class="menu-item" @click="openTab('load-test-data.html', '测试数据', '🧪')" @mouseenter="showTooltip($event, '测试数据')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">🧪</span>
                             <span class="menu-text">测试数据</span>
                         </div>
                         <div class="menu-item" @click="openTab('index.html', '系统首页', '🏠')" @mouseenter="showTooltip($event, '系统首页')" @mouseleave="hideTooltip()">
                             <span class="menu-icon">🏠</span>
                             <span class="menu-text">系统首页</span>
                         </div>
                     </div> -->
                 </div>
            </div>
            
            <!-- Tab区域 -->
            <div class="tab-container">
                <div class="tab-header">
                    <div class="tab-list">
                        <div 
                            v-for="(tab, index) in tabs" 
                            :key="tab.id"
                            class="tab-item"
                            :class="{ active: activeTabId === tab.id }"
                            @click="switchTab(tab.id)"
                        >
                            <span class="tab-title">{{ tab.title }}</span>
                            <span 
                                class="tab-close"
                                @click.stop="closeTab(tab.id)"
                                v-if="tabs.length > 1"
                            >×</span>
                        </div>
                    </div>
                    <div class="tab-actions">
                        <el-button 
                            size="mini" 
                            type="text" 
                            @click="closeAllTabs"
                            :disabled="tabs.length <= 1"
                        >
                            关闭全部
                        </el-button>
                        <el-button 
                            size="mini" 
                            type="text" 
                            @click="closeOtherTabs"
                            :disabled="tabs.length <= 1"
                        >
                            关闭其他
                        </el-button>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div class="content-area">
                    <iframe 
                        v-if="activeTabId"
                        :src="getActiveTabUrl()"
                        class="iframe-container"
                        frameborder="0"
                    ></iframe>
                    <div v-else class="empty-content">
                        <div>
                            <div class="empty-icon">📊</div>
                            <div>欢迎使用人力资源预测管理系统</div>
                            <div style="font-size: 14px; margin-top: 10px; opacity: 0.7;">
                                请从左侧菜单选择功能模块
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 全局tooltip -->
    <div id="global-tooltip" class="menu-tooltip"></div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tabs: [],
                    activeTabId: null,
                    tabCounter: 0,
                    sidebarCollapsed: false
                }
            },
            
            mounted() {
                // 默认打开首页
                this.openTab('index.html', '系统首页', '🏠');
            },
            
            methods: {
                // 打开新标签页
                openTab(url, title, icon) {
                    // 检查是否已经存在相同的标签页
                    const existingTab = this.tabs.find(tab => tab.url === url);
                    if (existingTab) {
                        this.switchTab(existingTab.id);
                        return;
                    }
                    
                    const newTab = {
                        id: ++this.tabCounter,
                        url: url,
                        title: title,
                        icon: icon
                    };
                    
                    this.tabs.push(newTab);
                    this.switchTab(newTab.id);
                },
                
                // 切换标签页
                switchTab(tabId) {
                    this.activeTabId = tabId;
                },
                
                // 关闭标签页
                closeTab(tabId) {
                    const index = this.tabs.findIndex(tab => tab.id === tabId);
                    if (index > -1) {
                        this.tabs.splice(index, 1);
                        
                        // 如果关闭的是当前激活的标签页，切换到其他标签页
                        if (this.activeTabId === tabId) {
                            if (this.tabs.length > 0) {
                                // 优先切换到右侧标签页，如果没有则切换到左侧
                                const nextTab = this.tabs[index] || this.tabs[index - 1];
                                this.switchTab(nextTab.id);
                            } else {
                                this.activeTabId = null;
                            }
                        }
                    }
                },
                
                // 关闭所有标签页
                closeAllTabs() {
                    this.$confirm('确定要关闭所有标签页吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.tabs = [];
                        this.activeTabId = null;
                    }).catch(() => {});
                },
                
                // 关闭其他标签页
                closeOtherTabs() {
                    this.$confirm('确定要关闭其他标签页吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const activeTab = this.tabs.find(tab => tab.id === this.activeTabId);
                        this.tabs = activeTab ? [activeTab] : [];
                    }).catch(() => {});
                },
                
                // 获取当前激活标签页的URL
                getActiveTabUrl() {
                    const activeTab = this.tabs.find(tab => tab.id === this.activeTabId);
                    return activeTab ? activeTab.url : '';
                },
                
                // 切换侧边栏收缩状态
                toggleSidebar() {
                    this.sidebarCollapsed = !this.sidebarCollapsed;
                },
                
                // 处理用户菜单命令
                handleUserCommand(command) {
                    switch (command) {
                        case 'profile':
                            this.$message.info('打开个人信息页面');
                            break;
                        case 'settings':
                            this.$message.info('打开系统设置页面');
                            break;
                        case 'logout':
                            this.$confirm('确定要退出登录吗？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$message.success('已退出登录');
                                // 这里可以添加退出登录的逻辑
                            }).catch(() => {});
                            break;
                    }
                },
                
                // 显示tooltip
                showTooltip(event, text) {
                    if (!this.sidebarCollapsed) return;
                    
                    const tooltip = document.getElementById('global-tooltip');
                    if (tooltip) {
                        tooltip.textContent = text;
                        tooltip.style.opacity = '1';
                        tooltip.style.visibility = 'visible';
                        
                        // 计算位置
                        const rect = event.target.getBoundingClientRect();
                        const sidebarWidth = this.sidebarCollapsed ? 60 : 250;
                        tooltip.style.left = (rect.left + sidebarWidth + 10) + 'px';
                        tooltip.style.top = (rect.top + rect.height / 2 - tooltip.offsetHeight / 2) + 'px';
                    }
                },
                
                // 隐藏tooltip
                hideTooltip() {
                    const tooltip = document.getElementById('global-tooltip');
                    if (tooltip) {
                        tooltip.style.opacity = '0';
                        tooltip.style.visibility = 'hidden';
                    }
                }
            }
        });
    </script>
</body>
</html> 